<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- 引入C标签 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            margin: auto;
            border-collapse: collapse;
        }

        /*ID 选择器*/
        #roleDiv {
            /*绝对定位 以左上角为起点 向右向下 移动元素*/
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            z-index: 1000;
            background-color: white;
            width: 400px;
            height: 100px;
            display: none;
        }

        /*  遮罩样式 */
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            /*  */
            z-index: 100;
            /* 隐藏 */
            display: none;
        }

    </style>
</head>
<body>

<table border="1px solid black">
    <tr>
        <td> 用户名</td>
        <td> 手机号</td>
        <td> 邮箱</td>
        <td> 爱好</td>
        <td> 地址</td>
        <td> 操作</td>
    </tr>


    <c:forEach varStatus="i" var="user" items="${list}">
        <tr>
            <td>${user.getUserName()} </td>
            <td>${user.getPhoneNo()} </td>
            <td>${user.email} </td>
            <td>${user.hobby}</td>
            <td>北京市南城区</td>
            <td>
                <button onclick="peim(${user.id})">权限</button>
                <button onclick="edit(${user.id})">编辑</button>
                <button onclick="deleteById(${user.id})">删除</button>
            </td>
        </tr>
    </c:forEach>

</table>

<%--  点击权限按钮，展示roleDiv --%>
<div id="roleDiv">
    <span>分配用户角色</span>
<%--  下拉框  --%>
    <select>
        <%--  下拉框中的元素ajax动态加载 或者页面加载的时候使用 c标签渲染 --%>
        <c:forEach items="${roleList}" var="role">
            <option value="${role.id}"> ${role.name} </option>
        </c:forEach>
    </select>

    <button onclick="update()">确认</button>
</div>
<%--  遮罩 --%>
<div class="mask" id="mask"></div>

</body>
</html>
<script>

    let userId;

    //分配用户角色
    function peim(uid) {
        //显示角色选择模态框
        let roleDiv = document.getElementById("roleDiv");
        roleDiv.style.display = "block";//显示角色选择模态框
        //显示遮罩
        let mask = document.getElementById("mask");
        mask.style.display = "block";
        userId = uid;

    }

    function update(){
        //点击确认按钮，提交数据
        //uid roleId
        let roleId = document.querySelector('select option:checked');//使用选择器获取元素  元素、id 类  属性
        console.log(roleId.value);

        //使用ajax发送请求  修改请求
        let xhr = new XMLHttpRequest();//创建ajax对象
        xhr.onreadystatechange = function () {
            if(xhr.status == 200 && xhr.readyState == 4){
                let respStr =  xhr.responseText;//收到的json字符串
                let respObj = JSON.parse(respStr);//转成对象
                alert(respObj.msg);//弹窗，输出提示信息
                //关闭模态框
                document.getElementById("roleDiv").style.display = "none";
                //隐藏遮罩
                document.getElementById("mask").style.display = "none";
            }
        }
        //建立连接  如果执行SQL insert update delete  使用post
        //         如果执行SQL select  使用get
        // xhr.open("post", "/user/role/updateUser?userId="+userId+"&roleId="+roleId.value);
        xhr.open("post", "/user/role/updateUser");
        // xhr.open("post", "/user/role/formData");
        //post提交数据需要指定请求头，如果使用& = 拼接参数，应该使用
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 封装参数对象   formData // multipart/form-data   复合类型  其中包含了 文件、form表单
        let params = new FormData();
        params.set("userId", userId);
        params.set("roleId", roleId.value);
        //发送请求
        xhr.send('userId='+userId+'&roleId='+roleId.value);
        xhr.send(params);
    }

    function edit(id) {
        location.href = "toUpdateUser?id=" + id;
    }

    function deleteById(id) {
        location.href = "delete?id=" + id;
    }
</script>
